<template>
  <div class="warp-content blog">
    <!-- 返回顶部 -->
    <el-backtop style="z-index: 1501;"></el-backtop>
    <!-- 博客主体部分 -->
    <main class="blog-main">
      <header class="header">
        <h2>{{ blog.title }}</h2>
        <div class="info">
          <span>
            <i class="iconfont icon-rili"></i>发表于 {{ blog.createdAt }}
          </span>
          <span>
            <i class="iconfont icon-wenjianjia"></i>所属分类：
            <u @click="jumpToCategory" class="link">{{
              category ? category.title : "/"
            }}</u>
          </span>
          <span><i class="iconfont icon-user"></i>DongJie</span>
          <span @click="copyUrl" class="link">
            <i class="iconfont icon-link"></i><u>复制文章连接</u>
          </span>
          <!-- <span>
            <i class="iconfont icon-eye"></i>浏览量 {{ blog.viewCount }}
          </span> -->
        </div>
      </header>
      <mavon-editor
        class="markdown-view"
        v-model="blog.content"
        :boxShadow="false"
        defaultOpen="preview"
        :toolbarsFlag="false"
        :previewBackground="'#fff'"
        :subfield="false"
        :codeStyle="code_style"
        :ishljs="true"
        :externalLink="externalLink"
      />
    </main>
  </div>
</template>

<script>
import "@/assets/markdown/github.css";
let publicPath = "http://192.168.31.239:7001";
if (process.env.NODE_ENV === "production") {
  publicPath = "http://182.92.165.30:7001";
}
export default {
  name: "Blog",
  data() {
    return {
      blog: {},
      category: {},
      code_style: "github",
      externalLink: {
        markdown_css: function() {
          // 这是你的markdown css文件路径
          return (
            publicPath + "/public/markdown/markdown/github-markdown.min.css"
          );
        },
        hljs_js: function() {
          // 这是你的hljs文件路径
          return publicPath + "/public/markdown/highlightjs/highlight.min.js";
        },
        hljs_css: false,
        katex_css: function() {
          // 这是你的katex配色方案路径路径
          return publicPath + "/public/markdown/katex/katex.min.css";
        },
        katex_js: function() {
          // 这是你的katex.js路径
          return publicPath + "/public/markdown/katex/katex.min.js";
        }
      }
    };
  },
  methods: {
    /**
     * 获取博客
     */
    async getBlog() {
      const blogId = this.$route.params.blogId;
      const { data: res } = await this.$api.webApi.getBlog(blogId);
      console.log(res);
      this.blog = res.data.blog;
      this.getCategory();
    },
    /**
     * 获取分类详情
     */
    async getCategory() {
      const categoryId = this.blog.categoryId;
      const { data: res } = await this.$api.webApi.getCategoryById(categoryId);
      console.log(res);
      this.category = res.data;
    },
    /**
     * 跳转到对应分类
     */
    jumpToCategory() {
      this.$router.push(`/category/?id=${this.category.categoryId}`);
    },
    /**
     * 复制博客链接
     */
    copyUrl() {
      let url = window.location.href;
      navigator.clipboard.writeText(url);
      console.log(url);
      this.$message.success("复制成功，快去分享吧！");
    }
  },
  created() {
    this.getBlog();
  }
};
</script>

<style lang="scss" scoped>
.warp-content.blog {
  width: 980px;
}
.blog-main {
  header {
    display: block;
    padding: 40px 25px 10px;
    background-color: #fff;
    text-align: center;

    h2 {
      font-size: 32px;
      color: black;
    }

    .info {
      color: #2d2d2d;
      padding: 1em 0;
      font-size: 12px;
      border-bottom: 1px dashed #cacaca;
      border-top: 1px dashed #cacaca;
      margin-top: 20px;

      a {
        text-decoration: underline;
        // color: #000;
        color: #2d2d2d;
      }

      span {
        margin-right: 20px;
      }

      .iconfont {
        font-size: 9px;
        margin-right: 6px;
      }

      .link {
        cursor: pointer;
      }
    }
  }

  .markdown-view {
    border: none;
  }
}
// TODO markdown code过小
</style>

<style lang="scss" scoped>
@media screen and (max-width: 960px) {
  .warp-content.blog {
    width: 100vw;
  }

  .blog-main {
    header {
      padding: 20px 15px 10px;

      h2 {
        font-size: 28px;
      }

      .info {
        display: none;
      }
    }
  }
  // TODO markdown调整 文件改为静态的???有大问题
  .markdown-body h1 {
    font-size: 10px;
  }
}
</style>
